<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <!--[if lt IE 9]>
    <script type="text/javascript" src="../lib/html5shiv.js"></script>
    <script type="text/javascript" src="../lib/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" type="text/css" href="../static/h-ui/css/H-ui.min.css"/>
    <link rel="stylesheet" type="text/css" href="../static/h-ui.admin/css/H-ui.admin.css"/>
    <link rel="stylesheet" type="text/css" href="../lib/Hui-iconfont/1.0.8/iconfont.css"/>
    <link rel="stylesheet" type="text/css" href="../static/h-ui.admin/skin/default/skin.css" id="skin"/>
    <link rel="stylesheet" type="text/css" href="../static/h-ui.admin/css/style.css"/>
    <!--[if IE 6]>
    <script type="text/javascript" src="../lib/DD_belatedPNG_0.0.8a-min.js"></script>
    <script>DD_belatedPNG.fix('*');</script>
    <![endif]-->
    <title>编辑类型</title>
    <style>
        .input-text {
            max-width: 160px;
            min-width: 70px;
        }
        .form-label {
            min-width: 70px;
        }
    </style>
</head>
<body>
<article class="page-container">
    <form class="form form-horizontal" id="form-admin-add" action="insertInfo" method="post">
        <c:forEach items="${books}" var="item" varStatus="index">
            <div class="row cl">
                <input type="hidden" value="${item.id}" name="orderDetails[${index.index}].booksId">
                <div class="col-sm-4">
                    <label class="form-label col-xs-4 col-sm-4">书籍名</label>
                    <div class="formControls col-xs-8 col-sm-8" style="padding-left: 0">
                        <input type="text" class="input-text" placeholder="" readonly
                               name="orderDetails[${index.index}].booksName" autocomplete="off" value="${item.bookName}">
                    </div>
                </div>
                <div class="col-sm-2">
                    <label class="form-label col-xs-6 col-sm-4">单价</label>
                    <div class="formControls col-xs-6 col-sm-4" style="padding-left: 0">
                        <input type="text" class="input-text unitPrice" placeholder="" readonly
                               name="orderDetails[${index.index}].unitPrice" autocomplete="off" value="${item.bookPrice}">
                    </div>
                </div>
                <div class="col-sm-2">
                    <label class="form-label col-xs-6 col-sm-4">数量</label>
                    <div class="formControls col-xs-6 col-sm-4" style="padding-left: 0">
                        <input type="text" class="input-text payNum" placeholder="" value="1"
                               name="orderDetails[${index.index}].payNum" autocomplete="off">
                    </div>
                </div>
                <div class="col-sm-2">
                    <label class="form-label col-xs-6 col-sm-4">小计</label>
                    <div class="formControls col-xs-6 col-sm-4" style="padding-left: 0">
                        <input type="text" class="input-text totalPrice" placeholder="" readonly
                               name="orderDetails[${index.index}].totalPrice" autocomplete="off" value="${item.bookPrice}">
                    </div>
                </div>
                <div class="col-sm-2">
                    <button class="btn btn-warning deleteBtn" type="button">删除</button>
                </div>
            </div>
        </c:forEach>

        <div class="row cl">
            <div class="col-xs-3 col-sm-3 col-xs-offset-1">
                <input class="btn btn-primary radius" type="submit" id="button" value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
                <input class="btn btn-primary radius" type="button" onclick="window.history.back();" value="&nbsp;&nbsp;上一步&nbsp;&nbsp;">
            </div>
        </div>

    </form>
</article>

<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="../lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="../lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="../static/h-ui/js/H-ui.min.js"></script>
<script type="text/javascript" src="../static/h-ui.admin/js/H-ui.admin.js"></script> <!--/_footer 作为公共模版分离出去-->

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="../lib/jquery.validation/1.14.0/jquery.validate.js"></script>
<script type="text/javascript" src="../lib/jquery.validation/1.14.0/validate-methods.js"></script>
<script type="text/javascript" src="../lib/jquery.validation/1.14.0/messages_zh.js"></script>
<script type="text/javascript" src="../lib/My97DatePicker/4.8/WdatePicker.js"></script>
<script type="text/javascript" src="../lib/datatables/1.10.0/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="../lib/laypage/1.2/laypage.js"></script>
<script type="text/javascript">
    $(function () {

        $('.table-sort').dataTable({
            "aaSorting": [[1, "desc"]],//默认第几个排序
            "searching": true,
            "aoColumnDefs": [
                {"orderable": false, "aTargets": [0, 5]}// 不参与排序的列
            ]
        });

        $('.skin-minimal input').iCheck({
            checkboxClass: 'icheckbox-blue',
            radioClass: 'iradio-blue',
            increaseArea: '20%'
        });

        /**
         * 输入数量计算价格
         */
        $(".payNum").change(function() {
            let payNum = $(this).val();
            let check = checkInt(payNum, false);
            if(check) {
                layer.msg(check, {
                    icon: 7,
                    time: 1500
                })
                return;
            }
            // 计算小计
            let unitPrice = $(this).parent().parent().parent().find(".unitPrice").val();
            $(this).parent().parent().parent().find(".totalPrice").val(parseFloat(parseFloat(unitPrice) * parseInt(payNum)).toFixed(2));
        })

        /**
         * 响应删除按钮
         */
        $(".deleteBtn").click(function() {
            $(this).parent().parent().remove();
        })

        /**
         * 表单提交
         */
        $("#form-admin-add").validate({
            onkeyup: false,
            focusCleanup: true,
            success: "valid",
            submitHandler: function (form) {
                $(form).ajaxSubmit({
                    type: 'post',
                    url: "insertInfo",
                    success: function (data) {
                        if(data.code == 0) {
                            layer.msg(data.msg, {icon: 1, time: 1000});
                            setTimeout(function () {
                                var index = parent.layer.getFrameIndex(window.name);
                                parent.$('.btn-refresh').click();
                                $("#typeName").val();
                                parent.layer.close(index);
                            }, 1500);
                        } else {
                            layer.msg(data.msg, {icon: 7, time: 1000});
                        }
                    },
                    error: function (XmlHttpRequest, textStatus, errorThrown) {
                        layer.msg('error!', {icon: 5, time: 1000});
                    }
                });
            }
        });

        /**
         * 判断是否是正整数
         * @param number
         * @param isZero
         * @returns {string}
         */
        function checkInt(number, isZero) {
            // 正整数正则
            var reNumber = /^[0-9]\d*$/;
            if(!isZero) {
                reNumber = /^[1-9]\d*$/;
            }
            if(!number) {
                return "请填写完整信息";
            } else if(!reNumber.test(number)) {
                return "请输入正确的正整数！"
            }
        }
    });


</script>
<!--/请在上方写此页面业务相关的脚本-->
</body>
</html>